<template>
  <div>
    <!-- 添加或修改资产清单表对话框 -->
    <el-dialog ref="editDialog" v-model="openFlag" title="选择设备" width="80%" append-to-body>
      <div>
        <vxe-table ref="tableRef" v-loading="tableData.loading"
                   border="full"
                   :column-config="{resizable: true}"
                   :data="tableData.list">

          <vxe-column type="checkbox"></vxe-column>

          <vxe-column field="name" title="名称"></vxe-column>
          <vxe-column field="number" width="250" title="序列号"></vxe-column>

          <vxe-column title="类型">
            <template #default="{row}">
              {{getHardwareTypeShow(row.hardwareType)}}
            </template>
          </vxe-column>

          <vxe-column title="连接状态">
            <template #default="scope">
              <span style="color: rgb(103, 194, 58);" v-if="scope.row.status">已连接</span>
              <span style="color: rgb(245, 108, 108);" v-else>已断开</span>
            </template>
          </vxe-column>

        </vxe-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script setup>

import api from "./api.js";

const { proxy } = getCurrentInstance();

const emit = defineEmits(['sub'])

const openFlag = ref(false);
const hardwareTypeList = [{
  label: 'RFID打印机',
  value: 1
}, {
  label: 'RFID天线',
  value: 2
}, {
  label: 'RFID通道门',
  value: 3
}];

const tableData = reactive({
  loading: false,
  list: [], // 表格列表数据
  paging: {
    total: 0, // 总条数
    pageNum: 1,
    pageSize: 10,
  }
});

const tableRef = ref();

function getHardwareTypeShow(typeId) {
  let one = hardwareTypeList.find(item => parseInt(item.value) === typeId);
  if (!one) {
    return null;
  }
  return one.label;
}

function open() {
  openFlag.value = true;
  getList();
}

function close() {
  openFlag.value = false;
}

/** 查询资产清单表列表 */
async function getList() {

  tableData.loading = true;
  const {pageNum, pageSize} = tableData.paging;
  const query = {};
  const pageReq = {page: pageNum - 1, size: pageSize};
  api.list(query, pageReq).then(response => {
    debugger
    tableData.list = response;
    tableData.loading = false;
  }).catch(error => {
    tableData.loading = false;
    console.log(error);
  });
}

async function submitForm() {
  const checked = tableRef.value.getCheckboxRecords();
  if (!checked || checked.length === 0) {
    return proxy.$modal.msgError('请选择你要绑定的设备');
  }
  await api.updateMyList(checked.map(item=>item.id));
  proxy.$modal.msgSuccess('操作成功');
  emit('sub');
  close();
}

defineExpose({
  open
})


</script>

